<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'default',
		navigationBarBackgroundColor: '#ffffff',
		navigationBarTextStyle: 'black',
		backgroundColor: '#FFFFFF',
		navigationBarTitleText: '班级共读计划',
	},
}
</route>
<template>
	<view class="page-class">
		<view index="14" class="block-4">
			<view class="staudenDetails_topLeftBox">
				<text index="13" class="caption-7 font-bold">{{ planInfoDetail.title }}</text>
				<image
					class="staudenDetails_topRightBox_image"
					:src="baseImg + '/classSetUp.png'"
					@tap="editPlan"
					v-if="planInfoDetail.list[0].edit_btn"
				/>
				<view class="title-6">
					<text
						index="12"
						class="title-7"
						:style="{ backgroundColor: planInfoDetail.status == 3 ? '#acadad' : '#2ba5e0' }"
						>{{ getPlanStatusToTex(planInfoDetail.status) }}</text
					>
					<text index="12" class="title-8">{{
						dayjs(planInfoDetail.start_time * 1000).format('YYYY年MM月DD日') +
						' - ' +
						dayjs(planInfoDetail.end_time * 1000).format('YYYY年MM月DD日')
					}}</text>
				</view>
			</view>

			<view
				index="11"
				class="container-4"
				@tap="linkUrl(`/pages/pages-readingPlan/partici-record/index?id=${planId}`)"
			>
				<view class="flex items-center">
					<text class="text-[25rpx] text-[#34A4E2] ml-2"
						>{{ planInfoDetail.list[0].join_total || 0 }}人已参与</text
					>
					<text class="text-[25rpx] text-[#919191] ml-2"
						>{{
							planInfoDetail.list[0].total && planInfoDetail.list[0].join_total
								? planInfoDetail.list[0].total - planInfoDetail.list[0].join_total
								: 0
						}}人待参与</text
					>
					<text class="text-[25rpx] text-[#46C853] ml-2"
						>{{ planInfoDetail.list[0].complete_total || 0 }}人已完成</text
					>
				</view>
				<view class="flex items-end">
					<text class="text-[25rpx] text-[#34A4E2] mr-[10rpx]"
						>完成率{{ planInfoDetail.list[0].progress || 0 }}%</text
					>
					<image index="9" :src="baseImg + '/gengduo.png'" class="icon-right-2" />
				</view>
			</view>
		</view>

		<view index="14" class="block-5">
			<view class="text-[#303030] text-[33rpx] font-bold w-[100%] font-bold" style="float: left"
				>共读书目</view
			>
			<view
				class="w-[202rpx] mt-[25rpx] mr-[25rpx]"
				style="float: left"
				v-for="(item, index) in bookList"
				:key="index"
				@tap="linkUrl(`/pages-book/details/index?id=${item.id}`)"
			>
				<image
					class="w-full h-[250rpx] rounded-[40rpx]"
					style="float: left"
					:src="item.cover_img || baseImg + '/img-shangcixuedao.png'"
				></image>
				<text
					class="text-[#303030] inline-block w-full text-[25rpx] mt-1 font-bold truncate"
					style="float: left; text-align: center"
					>{{ item.name }}</text
				>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { usePlanStore, useUserStore } from '@/store';
import useChangeTabbar from '@/hooks/useChangeTabbar';
import { systemInfo } from '@/utils/getSystemInfo';
import { getPlanDetailBookListApi, getPlanInfoDetailApi } from '@/service/plan';
import {
	initializeApp,
	getPlanStatusToTex,
	calculateDaysBetweenTimestamps,
	getPlanDurationId,
	getDurationName,
} from '@/utils';
import dayjs from 'dayjs';
import onShare from '@/hooks/useShare';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onShareAppMessage, onShareTimeline } = onShare();

const planStore = usePlanStore();
const { planInfo } = storeToRefs(planStore);

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);

const { statusBarHeight, navHeight } = systemInfo();
const barAlbright = ref(0);
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

const linkUrl = (url = '') => {
	if (!url) return;
	uni.navigateTo({ url });
};
const planId = ref(0);
const planInfoDetail: any = ref();
const getPlanInfoDetail = async () => {
	try {
		const res = await getPlanInfoDetailApi(planId.value);
		if (res.status_code === 200) {
			const resData = res.data;
			planInfoDetail.value = resData;
		} else {
			uni.hideLoading();
			uni.showToast({
				icon: 'none',
				title: res.message || '获取失败~',
			});
		}
	} catch (error) {
		uni.hideLoading();
	}
};
const bookList: any = ref();
const getPlanDetailBookList = async () => {
	try {
		const res = await getPlanDetailBookListApi(planId.value);
		if (res.status_code === 200) {
			const resData: any = res.data;
			bookList.value = resData.list;
		} else {
			uni.hideLoading();
			uni.showToast({
				icon: 'none',
				title: res.message || '获取失败~',
			});
		}
	} catch (error) {
		uni.hideLoading();
	}
};
const editPlan = () => {
	planStore.setPlanInfo({
		...planStore.planInfo,
		...{
			id: planId.value,
			status: planInfoDetail.value.status,
			title: planInfoDetail.value.title,
			start_time: dayjs(planInfoDetail.value.start_time * 1000).format('YYYY-MM-DD'),
			duration: getPlanDurationId(
				calculateDaysBetweenTimestamps(
					planInfoDetail.value.end_time,
					planInfoDetail.value.start_time,
				),
			),
			duration_name: getDurationName(
				getPlanDurationId(
					calculateDaysBetweenTimestamps(
						planInfoDetail.value.end_time,
						planInfoDetail.value.start_time,
					),
				),
			),
			end_time: dayjs(planInfoDetail.value.end_time * 1000).format('YYYY-MM-DD'),
		},
	});
	uni.navigateTo({
		url: `/pages/releasePlan/edit/index`,
	});
};

onLoad(option => {
	planId.value = option.plan_id;
});
onShow(() => {
	barAlbright.value = navHeight + statusBarHeight;
	initializeApp(getPlanInfoDetail(), getPlanDetailBookList());
});
</script>
<style lang="scss">
page {
	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}

.block-4 {
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-content: flex-start;
	width: 700rpx;
	height: 240rpx;
	padding: 31.9rpx 0 0;
	margin: 30rpx 0 30rpx 25rpx;
	background-color: #fdffff;
	border-radius: 31.25rpx;
	box-shadow: 0 4.8rpx 20.8rpx rgba(0, 0, 0, 0.07);

	.staudenDetails_topLeftBox {
		width: 100%;

		.caption-7 {
			width: calc(100% - 22rpx);
			margin-left: 22rpx;
			overflow: hidden;
			font-size: 36rpx;
			font-style: normal;
			line-height: 54rpx;
			color: rgb(48 48 48 / 100%);
			text-align: left;
			text-decoration: none;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.staudenDetails_topRightBox_image {
			width: 43rpx;
			height: 43rpx;
			float: right;
			margin-right: 30rpx;
			margin-top: 5rpx;
		}

		.title-6 {
			width: calc(100% - 22rpx);
			overflow: hidden;
			text-align: left;
			text-decoration: none;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-left: 22rpx;
			margin-top: 10rpx;
		}
		.title-7 {
			font-size: 25rpx;
			font-style: normal;
			line-height: 50rpx;
			height: 50rpx;
			border-radius: 10rpx;
			padding: 0 20rpx;
			background-color: #2ba5e0;
			color: #fff;
			float: left;
		}
		.title-8 {
			margin-left: 10rpx;
			font-size: 28rpx;
			font-style: normal;
			line-height: 50rpx;
			color: #909090;
			float: left;
		}
	}

	.container-4 {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: space-between;
		width: 640rpx;
		padding: 20rpx 8.3rpx;
		margin-top: 33.4rpx;
		background-color: rgb(249 249 249 / 100%);
		border-radius: 31.2rpx;
	}

	.icon-right-2 {
		align-self: center;
		width: 25rpx;
		height: 22.9rpx;
		margin: 5rpx 18.75rpx 2rpx 0;
	}

	.layer-1 {
		align-self: center;
		width: 24.3rpx;
		height: 9rpx;
		background-color: rgb(143 144 146 / 100%);
		border-radius: 3.4rpx;
	}

	.mask-1 {
		align-self: center;
		width: 9rpx;
		height: 9rpx;
		margin-left: 7.6rpx;
		background-color: rgb(197 198 200 / 100%);
		border-radius: 3.4rpx;
	}

	.overlayer-1 {
		align-self: center;
		width: 9rpx;
		height: 9rpx;
		margin-left: 7.6rpx;
		background-color: rgb(197 198 200 / 100%);
		border-radius: 3.4rpx;
	}
}

.block-5 {
	display: inline-block;
	float: left;
	height: auto;
	width: 678rpx;
	padding: 42rpx 0 42rpx 22rpx;
	margin: 30rpx 0 30rpx 25rpx;
	background-color: rgb(253 255 255 / 100%);
	border-radius: 31.25rpx;
	box-shadow: 0 4.8rpx 20.8rpx 0 rgb(0 0 0 / 7%);
}
</style>
<style lang="scss" scoped>
page {
	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}
</style>
